<template>
  <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <van-cell v-for="item in list" :key="item.filmId" :title="item.name" />
  </van-list>
</template>

<script>
import { getNowPlayingFilmListApi } from '@/api/filmApi'
export default {
  data() {
    return {
      // 列表显示的数据
      list: [],
      // 是否要继续加载中 false时会触发load事件,true不触发,如果你的数据没有占满屏幕它会重次触请求
      // 直接数据占满屏幕或finished为true它会停止
      loading: false,
      // 如果为true时不会进行任何请求
      finished: false,
      // 分页
      page: 1,
    }
  },
  methods: {
    // 加载数据的方法
    async onLoad() {
      let page = this.page
      // 异步更新数据
      let ret = await getNowPlayingFilmListApi(page)
      // 得到数据，赋值
      let films = ret.data.films
      if (films.length > 0) {
        this.page++
        // this.list.push(...films)
        this.list = [...this.list, ...films]
        this.loading = false
      } else {
        this.finished = true
      }
      // 加载状态结束
      // this.loading = false
      // 数据全部加载完成
      // if (this.list.length >= 40) {
      // this.finished = true
      // }
    },
  },
}
</script>

<style lang="scss" scoped>
.van-list {
  margin-bottom: 50px;
}
</style>